<template>
  <div class="app-container">
    <div class="app-main">
      <div class="mainName">企业档案</div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="单位名称" prop="companyName">
          <el-input
            v-model="queryParams.companyName"
            placeholder="请输入"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="组织机构代码（统一社会信用代码）" prop="orgCode">
          <el-input
            v-model="queryParams.orgCode"
            placeholder="请输入"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="行政区名称" prop="belongRegion">
          <el-select
            v-model="queryParams.belongRegion"
            size="small"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in areaList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" border stripe :key="1">
        <el-table-column
          label="序号"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column label="企业名称" align="center" prop="companyName">
          <template slot-scope="scope">
            <div
              style="color: #0955b3; cursor: pointer"
              @click="openDetail(scope.row)"
            >
              {{ scope.row.companyName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="注册地" align="center" prop="companyName" />
        <el-table-column label="办公地" align="center" prop="companyName" />
        <el-table-column label="企业类型" align="center" prop="companyName" />
        <el-table-column
          label="近一年任务单受理总量"
          align="center"
          prop="companyName"
        />
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="openDetail(scope.row)"
              >详情</el-button
            >
            <el-dropdown @command="(command) => handleEdit(command, scope.row)">
              <el-button size="mini" type="text">
                编辑<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="basic"
                  >企业基础信息</el-dropdown-item
                >
                <el-dropdown-item command="qualification"
                  >具体资质情况</el-dropdown-item
                >
                <el-dropdown-item command="cases"
                  >过往成功防治案例</el-dropdown-item
                >
                <el-dropdown-item command="honor">企业荣誉</el-dropdown-item>
                <!-- <el-dropdown-item command="commendation"
                  >政府表彰</el-dropdown-item
                > -->
                <el-dropdown-item command="negative"
                  >企业负面信息</el-dropdown-item
                >
                <el-dropdown-item command="feature">企业特色</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <!-- <el-table-column label="组织机构代码（统一社会信用代码）" align="center" prop="orgCode" min-width="220"/>
      <el-table-column label="单位总人数" align="center" prop="peopleTotal"/>
      <el-table-column label="归属行政区" align="center" prop="belongRegion" />
      <el-table-column label="注册日期" align="center" prop="registerDate"/> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        class="pagination-container"
      />
    </div>
    <detailDialog
      v-if="detailShow"
      :show="detailShow"
      :editFlag="editFlag"
      :editSection="editSection"
      @closeMsg="closeDetail"
    />
  </div>
</template>
<script>
import { companyFileQuery } from "@/api/manage/approval";
import detailDialog from "./components/detailDialog.vue";
export default {
  name: "companyArchives",
  components: { detailDialog },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: "",
        orgCode: "",
        belongRegion: "",
      },
      loading: false,
      list: [],
      total: 0,
      areaList: [
        { value: "浦东新区", label: "浦东新区" },
        { value: "崇明区", label: "崇明区" },
        { value: "奉贤区", label: "奉贤区" },
        { value: "青浦区", label: "青浦区" },
        { value: "松江区", label: "松江区" },
        { value: "金山区", label: "金山区" },
        { value: "嘉定区", label: "嘉定区" },
        { value: "闵行区", label: "闵行区" },
        { value: "宝山区", label: "宝山区" },
        { value: "杨浦区", label: "杨浦区" },
        { value: "徐汇区", label: "徐汇区" },
        { value: "普陀区", label: "普陀区" },
        { value: "长宁区", label: "长宁区" },
        { value: "静安区", label: "静安区" },
        { value: "虹口区", label: "虹口区" },
        { value: "黄浦区", label: "黄浦区" },
      ],
      detailShow: false,
      editFlag: false,
      editSection: "", // 编辑的部分: basic/qualification/cases/honor/commendation/negative
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleEdit(command, row) {
      console.log("编辑：", command, row);
      this.editSection = command;
      this.detailShow = true;
      this.editFlag = true;
    },
    openDetail(row) {
      console.log(row, "查看详情");
      this.editSection = ""; // 清空编辑区域，显示所有模块
      this.detailShow = true;
      this.editFlag = false;
    },
    closeDetail() {
      this.detailShow = false;
      this.editSection = "";
    },
    getList() {
      this.loading = true;
      companyFileQuery(this.queryParams)
        .then((res) => {
          console.log(res, "23232");
          if (res.errorCode == "000000") {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleQuery() {
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-main {
  background-color: #fff;
  // padding: 15px 20px;
  border-radius: 8px;
  .mainName {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    color: #000000;
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 10px;
  }
  .btnGroup {
    text-align: right;
    margin: 15px 0;
  }
}
</style>
